<template>
  <div>
    <div class="sideNav">
      <ul class="list" :style="styles">
        <li v-for="(item,index) in data" :key="index"
           :style="{height:liHeight,'min-height':'20px'}"
            @mouseover="mouseOver($event,index)" @mouseleave="mouseLeave($event,index)"
            @click="clickDetails(item)">
          {{item.label}} <span class="el-icon-arrow-rigsideNavDataht icon"></span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name:'sideNav',
  props:{
    data: {
      type: Array,
      default: function(){
        return []
      }
    },
    styles: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  computed:{
    liHeight:function(){
      let height = ""
      for(let i of this.styles.height){
        if(i!="p"&&i!="x"){
          height+=i
        }
      }
      height = (parseInt(height)-(this.data.length*20)) / this.data.length
      return height+"px";
    }
  },
  created(){
  },
  methods:{
    mouseOver(val,index){
      if(val.target.tagName == "LI"){
        val.target.style.background = "#ff6700"
      }
      this.$emit("listOver",index)
    },
    mouseLeave(val,index){
      if(val.target.tagName == "LI"){
        val.target.style.background = ""
      }
      this.$emit("listLeave",index)
    },
    clickDetails(val){
      this.$emit("clickDetails",val)
    }
  }
}
</script>
<style lang="less" scope>
  .sideNav{
    position: absolute;
    .list{
      background-color: rgba(0,0,0,.6);
      color: #fff;
      margin: 0 0;
      list-style-type: none;
      padding: 0 0;
      li{
        cursor: pointer;
        padding: 10px 20px;
        .icon{
          position: absolute;
          right: 20px;
          margin-top: 5px;
        }
      }
    }
  }
</style>